<template>
   <!-- 生成二维码开放接口:
          二维码内容[通常为url]
          二维码大小[限制为正方形　　　　　　　二维码下方显示：文字
          二维码中间显示：图片-->
   <div :id="meQrcode" :title="androidText">
     <div class="qrcode_box">
       <img
         class="qrcode_canvas"
         id="qrcode_canvas"
         ref="qrcode_canvas"
         alt="二维码本图"
       />
       <img
         class="qrcode_logo"
         ref="qrcode_logo"
         src="../../../assets/img/app2.png"
         alt="公司logo"
       />
       <canvas
         :width="qrSize"
         :height="qrSize"
         class="canvas"
         ref="canvas"
       ></canvas>
     </div>
   </div>
 </template>
 <script>
 import QRCode from "qrcode";
 export default {
   props: {
     qrcodeUrl: {
       type: String,
       default: ""
     },
     qrSize: {
       type: Number,
       default: 260
     },
     androidText: {
       default: ""
     },
     qrLogoSize: {
       type: Number,
       default: 40
     },
     androidTextSize: {
       type: Number,
       default: 14
     }
   },
   data() {
     return {
       meQrcode: '',
     };
   },
   methods: {
     /**
      * @argument qrcodeUrl        二维码内容
      * @argument qrSize       二维码大小
      * @argument androidText       二维码中间显示文字
      * @argument androidTextSize   二维码中间显示文字大小(默认16px)
      * @argument qrLogo       二维码中间显示图片
      * @argument qrLogoSize   二维码中间显示图片大小(默认为80)
      */
     handleQrcodeToDataUrl(qrcodeUrl) {
       let qrcode_canvas = this.$refs.qrcode_canvas;
       let qrcode_logo = this.$refs.qrcode_logo;
       let canvas = this.$refs.canvas;
       const that = this;
       QRCode.toDataURL(
         qrcodeUrl,
         { errorCorrectionLevel: "H" },
         (err, url) => {
           qrcode_canvas.src = url;
           // 画二维码里的logo// 在canvas里进行拼接
           let ctx = canvas.getContext("2d");
 
           setTimeout(() => {
             //获取图片
             ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
             if (that.qrLogo) {
               //设置logo大小
               //设置获取的logo将其变为圆角以及添加白色背景
               ctx.fillStyle = "#fff";
               ctx.beginPath();
               let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
               let h = that.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)
               let w = that.qrLogoSize + 10; //圆角宽
               let x = logoPosition - 5;
               let y = logoPosition - 5;
               let r = 5; //圆角半径
               ctx.moveTo(x + r, y);
               ctx.arcTo(x + w, y, x + w, y + h, r);
               ctx.arcTo(x + w, y + h, x, y + h, r);
               ctx.arcTo(x, y + h, x, y, r);
               ctx.arcTo(x, y, x + w, y, r);
               ctx.closePath();
               ctx.fill();
               ctx.drawImage(
                 qrcode_logo,
                 logoPosition,
                 logoPosition,
                 that.qrLogoSize,
                 that.qrLogoSize
               );
             }
             if (that.androidText) {
               //设置字体
               let fpadd = 10; //规定内间距
               ctx.font = "bold " + that.androidTextSize + "px Arial";
               let tw = ctx.measureText(that.androidText).width; //文字真实宽度
               let ftop = that.qrSize - that.androidTextSize; //根据字体大小计算文字top
               let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
               let tp = that.androidTextSize / 2; //字体边距为字体大小的一半可以自己设置
               ctx.fillStyle = "#fff";
               ctx.fillRect(
                 fleft - tp / 2,
                 ftop - tp / 2,
                 tw + tp,
                 that.androidTextSize + tp
               );
               ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
               ctx.fillStyle = "#333";
               ctx.fillText(that.androidText, fleft, ftop);
             }
             canvas.style.display = "none";
             qrcode_canvas.src = canvas.toDataURL();
             qrcode_canvas.style.display = "inline-block";
           }, 0);
         }
       );
     }
   },
   mounted() {
     this.handleQrcodeToDataUrl(this.qrcodeUrl);
     // 防止多个组件互相影响
     this.meQrcode = this.id || Math.round(Math.random() * 100000);
   },
   updated() {
     this.handleQrcodeToDataUrl(this.qrcodeUrl);
   },
 };
 </script>
 <style  scoped>
 
 .qrcode_box{position: relative;}
 .qrcode_box,
 #meQrcode {
   display: inline-block;
 }
 .qrcode_box .qrcode_logo{
    position: absolute;
    top: 100px;
    width: 40px;
    border-radius: 5px;
    left: 107px; padding: 3px;
    background: #fff;
 }
 </style>